var vm = new Vue({
    el:"#app",
    data:{
        isShowUserForm:false,
        isShowPwdLayer:false,
        username:"",
        realName:"",
        cellphone:"",
        roleList:"",//角色列表
        roleCheckboxHtml:""//角色列表html
    },
    methods:{
        /**
         * 初始化bootstrapTable
         */
        initTable:function(){
            var _this = this;
            $('#tbSysUser').bootstrapTable($.extend(bootstrapTableOption,{
                url: g_comm.manager_url+'/sysUser/list',           //请求后台的URL（*）
                toolbar: '#toolbar',                          //工具按钮用哪个容器
                queryParams: _this.queryParams,               //传递参数（*）
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                columns: [{
                    checkbox: true
                }, {
                    field: 'username',
                    title: '用户名'
                }, {
                    field: 'realName',
                    title: '真实姓名'
                }, {
                    field: 'email',
                    title: '邮箱'
                }, {
                    field: 'cellphone',
                    title: '手机号'
                }, {
                    field: 'status',
                    title: '用户状态',
                    formatter : function(value, row, index) {
                        if (value == '0') {
                            return '<span class="label label-success">正常</span>';
                        } else if (value == '1') {
                            return '<span class="label label-danger">禁用</span>';
                        }
                    }
                }, {
                    field: 'createUser',
                    title: '创建人'
                }, {
                    field: 'createTime',
                    title: '创建时间',
                    formatter:function(value,row,index){
                        if(value!=null){
                            return new Date(value).toString("yyyy-MM-dd HH:mm:ss");
                        }else{
                            return "";
                        }
                    }
                }, {
                    field: 'updateUser',
                    title: '更新人'
                }, {
                    field: 'updateTime',
                    title: '修改时间',
                    formatter:function(value,row,index){
                        return new Date(value).toString("yyyy-MM-dd HH:mm:ss");
                    }
                }
                ]
            }));
        },
        /**
         * 删除
         */
        del:function(){
            //获取选中的行
            var selectRows = $('#tbSysUser').bootstrapTable('getSelections');
            if(selectRows.length==0){
                layer.alert('请选择要删除的数据!',{
                    title: '提示框',
                    icon:0
                });
                return;
            }
            var ids = "";
            $(selectRows).each(function (index, obj) {
                ids+=obj.id+",";
            });
            ids=ids.substring(0,ids.length-1);
            parent.layer.confirm("你确定是要删除吗！", {btn: ['确定','取消']},
                function(){//确定事件
                    //关闭confirm Dialog
                    parent.layer.closeAll('dialog');
                    $.ajax({
                        url: g_comm.manager_url+"/sysUser/delete",
                        data: {ids:ids},
                        success: function(r){
                            if(r.code == 0){
                                layer.msg('删除成功！', {icon: 1});
                                //重新刷新数据
                                $('#tbSysUser').bootstrapTable('refresh');
                            }else{
                                layer.alert(r.msg,{
                                    title: '提示框',
                                    icon:0
                                });
                            }
                        }
                    });
                });
        },

        /**
         * 查询参数
         * @param params
         */
        queryParams:function (params) {
            return {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                username: this.username,
                realName: this.realName,
                cellphone: this.cellphone
            };
        },
        /**
         * 新增
         */
        add:function(){
            $("#userForm")[0].reset();
            $("#imageImg").attr("src","static/img/sys/defaultHeadImg.png");
            this.userDetail = "";//置空,避免受上一次编辑影响
            this.getRoleList();//获取用户角色列表
            showLayer("新增用户","userCreateOrUpdate",800);
        },
        /**
         * 获取用户详情信息
         * @param userId
         */
        getUserDetail: function(userId){
            $.ajax({
                url:g_comm.manager_url+"/sysUser/info",
                data:{"id":userId},
                success:function(result){
                    if(result.code == 0){
                        vm.userDetail = result.data;
                        vm.getRoleList();//获取角色列表
                    }else{
                        layerAlert(result.msg);
                    }
                }
            });
        },
        /**
         * 获取角色列表
         * @param isCheck
         */
        getRoleList: function(){
            $.ajax({
                url:g_comm.manager_url+"/sysRole/select",
                success:function(result){
                    if(result.code == 0){
                        vm.roleCheckboxHtml = "";
                        vm.roleList = result.data;
                        if(vm.userDetail!=null){
                            $(vm.roleList).each(function (index, role) {
                                //对一系列复选框和单选框使用 .checkbox-inline 或.radio-inline class,控制它们显示在同一行上。
                                var tempHtml='<label class="checkbox-inline"><input type="checkbox" name="roleIds" value="{0}"/>{1}</label>';
                                $(vm.userDetail.roleIdList).each(function (index, roleId) {
                                    if(roleId==role.id){
                                        tempHtml='<label class="checkbox-inline"><input type="checkbox" name="roleIds" value="{0}" checked="checked"/>{1}</label>';
                                        return false;//退出循环
                                    }
                                });
                                vm.roleCheckboxHtml+=String.format(tempHtml,role.id,role.roleName);
                            });
                        }else{
                            $(vm.roleList).each(function (index, role) {
                                var tempHtml='<label class="checkbox-inline"><input type="checkbox" name="roleIds" value="{0}"/>{1}</label>';
                                vm.roleCheckboxHtml+=String.format(tempHtml,role.id,role.roleName);
                            });
                        }
                    }else{
                        layerAlert(result.msg);
                    }
                }
            });
        },
        /**
         * 保存
         */
        save:function(){
            if(!this.validate()){
                return false;
            }
            var saveUrl = g_comm.manager_url+'/sysUser/add';
            var id = $("#id").val();
            if(id!=""){
                //编辑状态
                saveUrl = g_comm.manager_url+'/sysUser/update';
            }
           $.ajax({
                url:saveUrl,
                data:$("#userForm").serialize(),
                success:function(result){
                    if(result.code == 0){
                        layer.closeAll(); //疯狂模式，关闭所有层
                        layer.msg('操作成功！', {icon: 1});
                        $("#id").val("");//清空隐藏域中的id，避免由于有id导致当成更新操作
                        //重新刷新数据
                        $('#tbSysUser').bootstrapTable('refresh');
                    }else{
                        layer.alert(result.msg,{
                            title: '提示框',
                            icon:0
                        });
                        return false;
                    }
                }
            });
        },
        /**
         * 修改用户
         */
        edit:function(){
            //获取选中的行
            var selectRows = $('#tbSysUser').bootstrapTable('getSelections');
            if(selectRows.length==0){
                layer.alert('请选择要编辑的数据!',{
                    title: '提示框',
                    icon:0
                });
                return;
            }
            if(selectRows.length>1){
                layer.alert('一次只能编辑的一条数据!',{
                    title: '提示框',
                    icon:0
                });
                return;
            }
            var rowData = selectRows[0];
            this.getUserDetail(rowData.id);//根据用户ID获取用户信息
            rowData.password = null; //清空密码
            //填充Form表单数据
            loadData(rowData,"userForm");
            showLayer("编辑用户","userCreateOrUpdate",800);
        },
        /**
         * 校验
         * @returns {boolean}
         */
        validate: function () {
            var username = $("#username").val();
            if(username==""){
                layerAlert("请输入用户名");
                return false;
            }
            var userId = $("#id").val();
            if(userId==""){
                //新增用户需要输入密码
                var password = $("#password").val();
                if(password==""){
                    layerAlert("请输入密码");
                    return false;
                }
            }
            return true;
        },
        /**
         * 搜索
         */
        search:function () {
            $('#tbSysUser').bootstrapTable('refreshOptions',{pageNumber:1});
        },
        /**
         * 禁用
         */
        forbid:function () {
            //获取选中的行
            var selectRows =$('#tbSysUser').bootstrapTable('getSelections');
            if(selectRows.length==0){
                layerAlert("请选择要禁用的用户!");
                return;
            }
            var ids = "";
            $(selectRows).each(function (index, obj) {
                ids+=obj.id+",";
            });
            ids=ids.substring(0,ids.length-1);
            parent.layer.confirm("你确定是要禁用吗！", {btn: ['确定','取消']},
                function(){//确定事件
                    //关闭confirm Dialog
                    parent.layer.closeAll('dialog');
                    $.ajax({
                        url: g_comm.manager_url+"/sysUser/forbid",
                        data: {"ids":ids},
                        success: function(r){
                            if(r.code == 0){
                                layer.msg('操作成功！', {icon: 1});
                                //重新刷新数据
                                $('#tbSysUser').bootstrapTable('refresh');
                            }else{
                                layerAlert(r.msg);
                            }
                        }
                    });
                });
        },
        /**
         * 启用
         */
        enable:function () {
            //获取选中的行
            var selectRows = $('#tbSysUser').bootstrapTable('getSelections');
            if(selectRows.length==0){
                layerAlert("请选择要启用的用户!");
                return;
            }
            var ids = "";
            $(selectRows).each(function (index, obj) {
                ids+=obj.id+",";
            });
            ids=ids.substring(0,ids.length-1);
            parent.layer.confirm("你确定是要启用吗！", {btn: ['确定','取消']},
                function(){//确定事件
                    //关闭confirm Dialog
                    parent.layer.closeAll('dialog');
                    $.ajax({
                        url: g_comm.manager_url+"/sysUser/enable",
                        data: {"ids":ids},
                        success: function(r){
                            if(r.code == 0){
                                layer.msg('操作成功！', {icon: 1});
                                //重新刷新数据
                                $('#tbSysUser').bootstrapTable('refresh');
                            }else{
                                layerAlert(r.msg);
                            }
                        }
                    });
                });
        },
        /**
         * 重置密码
         */
        resetPwd:function () {
            //获取选中的行
            var selectRows = $('#tbSysUser').bootstrapTable('getSelections');
            if(selectRows.length==0){
                layerAlert("请选择用户!");
                return;
            }
            if(selectRows.length>1){
                layerAlert("一次只能选择一个用户!");
                return;
            }

            showLayer("重置密码","passwordLayer",400,200);
        },
        /**
         * 更新密码
         */
        updatePwd:function () {
            var selectRows = $('#tbSysUser').bootstrapTable('getSelections');
            var rowData = selectRows[0];
            //以对象的方式组装参数
            var data = {};
            data.newPassword = $("#newPassword").val();
            if(data.newPassword ==""){
                layerAlert("请输入新密码");
                return;
            }
            data.id = rowData.id;
            $.ajax({
                url: g_comm.manager_url+"/sysUser/resetPwd",
                data: data,
                success: function(result){
                    if(result.code == 0){
                        layer.closeAll(); //疯狂模式，关闭所有层
                        layer.msg('操作成功！', {icon: 1});
                    }else{
                        layer.alert(result.msg);
                    }
                }
            });
        },
        /**
         * 绑定按钮事件
         */
        bindBtnEvent: function () {
            $("#picImgFile").on("change",function(){
                if(this.files && this.files[0]){
                    //预览图片
                    $("#imageImg").attr("src",window.URL.createObjectURL(this.files[0]));
                }
            });
            $("#picImgFile_btn").on("click", function () {
                $("#picImgFile").trigger("click");
            });
            $("#imageImg").on("click", function () {
                $("#picImgFile").trigger("click");
            });
        }
    },
    mounted:function () {
        this.initTable();
        this.bindBtnEvent();
    }
});